<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <title>留言板</title>
</head>
<body>
<!--    导航-->
<!--    inverted：反转颜色-->
<!--    attached：使圆滑弧形变方-->
    <nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="comment icon"></i>留言板</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon input">
                        <input type="text" placeholder="Search...">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

<!--    中间内容-->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <h1 class="ui center aligned header">留言互动</h1>
            <div class="ui attached segment">
                <div class="ui form">
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="姓名" style="width: 541px">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input" >
                                <i class="mail icon"></i>
                                <input type="text" name="email" placeholder="邮箱" style="width: 541px">
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <textarea name="content" placeholder="清输入评论信息..."></textarea>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button class="ui teal button m-mobile-wide"><i class="edit"></i>发布</button>
                        <button class="ui button m-mobile-wide"><i class="edit"></i>充值</button>
                    </div>
                </div>
            </div>
            <div class="ui teal segment">
                <div class="ui threaded comments" style="max-width: 100%">
                    <h3 class="ui dividing header">评论</h3>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://picsum.photos/id/8/100/100">
                        </a>
                        <div class="content">
                            <a class="author">Matt</a>
                            <div class="metadata">
                                <span class="date">Today at 5:42PM</span>
                            </div>
                            <div class="text">
                                How artistic!
                            </div>
                            <div class="actions">
                                <a class="reply" data-commentid="1" data-commentnickname="Matt"
                                   onclick="reply(this)">回復</a>
                            </div>
                        </div>
                    </div>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://picsum.photos/id/7/100/100">
                        </a>
                        <div class="content">
                            <a class="author">Elliot Fu</a>
                            <div class="metadata">
                                <span class="date">Yesterday at 12:30AM</span>
                            </div>
                            <div class="text">
                                <p>This has been very useful for my research. Thanks as well!</p>
                            </div>
                            <div class="actions">
                                <a class="reply">回復</a>
                            </div>
                        </div>
                        <div class="comments">
                            <div class="comment">
                                <a class="avatar">
                                    <img src="https://picsum.photos/id/6/100/100">
                                </a>
                                <div class="content">
                                    <a class="author">Jenny Hess</a>
                                    <div class="metadata">
                                        <span class="date">Just now</span>
                                    </div>
                                    <div class="text">
                                        Elliot you are always so right :)
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回復</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://picsum.photos/id/5/100/100">
                        </a>
                        <div class="content">
                            <a class="author">Joe Henderson</a>
                            <div class="metadata">
                                <span class="date">5 days ago</span>
                            </div>
                            <div class="text">
                                Dude, this is awesome. Thanks so much
                            </div>
                            <div class="actions">
                                <a class="reply">回復</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    </br>
<!--    底部-->
    <footer th:replace="_fragments :: footer"  class="ui inverted vertical segment m-padded-tb-massive"></footer>
<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!--/*/</th:block>/*/-->
<script>
    $('.menu.toggle').click(function (){
        $('.m-item').toggleClass('m-mobile-hide');
    });


</script>
</body>
</html>